<script type="text/javascript">

$(document).ready(function() {

  //Default Action
  $(".tab_content").hide(); //Hide all content
  $("ul.tabs li:first").addClass("active").show(); //Activate first tab
  $(".tab_content:first").show(); //Show first tab content
  
  //On Click Event
  $("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    console.log(this);
    $(activeTab).fadeIn(); //Fade in the active content
    return false;
  });

});
</script>

<div class="container">
    <ul class="tabs">
        <li><a href="#tab1">Dự án đang chờ chấp nhận</a></li>
        <li><a href="#tab2">Dự án đang tiến hành</a></li>
        <!-- <li><a href="#tab3">Dự án mới nhất </a></li> -->
        <li><a href="#tab4">Dự án hoàn thành</a></li>
    </ul>
    <div class="tab_container">
        <?php $this->widget('JobBiddingWidget'); ?>
        <?php $this->widget('JobDoingWidget'); ?>       
        
        <?php $this->widget('JobEnddingWidget'); ?>
    </div>
</div>